<script setup lang="ts">

import {computed, reactive, ref} from "vue";

const parentMessage = ref('Parent')
const items = ref([{message: 'Foo'}, {message: 'Bar'}])

items.value.forEach((item, index) => {
  // 可以访问外层的 `parentMessage`
  // 而 `item` 和 `index` 只在这个作用域可用
  console.log(parentMessage, item.message, index)
})

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

const todos = [
  {name: 'Learn Vue', isComplete: false},
  {name: 'Learn React', isComplete: true},
  {name: 'Learn Angular', isComplete: false}
]

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}
</script>

<template>
  <div>
    <h1>列表渲染</h1>
    <p>我们可以使用 v-for 指令基于一个数组来渲染一个列表。<br/>
      v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
    </p>
    <div>
      <ul>
        <li v-for="item in items">
          {{ item.message }}
        </li>
      </ul>
      <ul>
        <li v-for="(item, index) in items">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
      </ul>
      <ul>
        <li v-for="{ message } in items">
          {{ message }}
        </li>
      </ul>
      <ul>
        <!-- 有 index 索引时 -->
        <li v-for="({ message }, index) in items">
          {{ message }} {{ index }}
        </li>
      </ul>
      <div v-for="item of items">{{ item.message }}</div>
      <div v-for="(item,index) of items">{{ item.message }} -- {{ index }}</div>
    </div>
    <div>
      <h2>你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。</h2>
      <ul>
        <li v-for="value in myObject">
          {{ value }}
        </li>
      </ul>
      <ul>
        <li v-for="(value, key) in myObject">
          {{ key }}: {{ value }}
        </li>
      </ul>
      <ul>
        <li v-for="(value, key, index) in myObject">
          {{ index }}. {{ key }}: {{ value }}
        </li>
      </ul>
      <div>
        <p>
          v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。
        </p>
        <span v-for="n in 10">{{ n }}</span>
      </div>
    </div>
    <div>
      <ul>
        <template v-for="item in items">
          <li>{{ item.message }}</li>
          <li class="divider" role="presentation">固定的</li>
        </template>
      </ul>
    </div>
    <div>
      <template v-for="todo in todos">
        <li v-if="!todo.isComplete">
          {{ todo.name }}
        </li>
      </template>
    </div>
    <div v-for="item in items" :key="item.message">
      <!-- 内容 -->
      {{ item.message }}.为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的
      key attribute
    </div>
    <div>
      <template v-for="todo in todos" :key="todo.name">
        <li>{{ todo.name }}</li>
      </template>
      <p>

      </p>
    </div>
    <div>
      <ul>
        <li v-for="n in evenNumbers">{{ n }}</li>
      </ul>
    </div>
    <div>
      <ul v-for="numbers in sets">
        <li v-for="n in even(numbers)">{{ n }}</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>

</style>